<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="src/main.css" />
	<script type="application/javascript">
		function $(id) {
			return document.getElementById(id);
		}
		var errorMessage = undefined;

		function BwTable(wrap) {
			this.wrap = (wrap == undefined) ? true : wrap;
			this.rows = new Array();
			this.header = [];

			this.setHeader = function (row) {
				this.header = row;
			}

			this.addRow = function (row) {
				this.rows.push(row);
			}

			this.getRow = function (index) {
				return this.rows[index];
			}

			this.countRows = function () {
				return this.rows.length;
			}

			this.getTableHTML = function () {
				let a = '';
				if (this.wrap) {
					a += '<table class="bwTable">\n';
				}
				a += this.getHeaderHTML();

				for (let row in this.rows) {
					a += this.getRowHTML(this.rows[row]);
				}
				if (this.wrap) {
					a += '</table>\n';
				}

				return a;
			}

			this.getHeaderHTML = function () {
				if (this.header.length == 0) return '';

				let a = '<tr>';
				for (let cell in this.header) {
					a += '<th>' + this.header[cell] + '</th>';
				}

				a += '</tr>\n';
				return a;
			}

			this.getRowHTML = function (row) {
				let a = '<tr>';
				for (let cell in row) {
					let v = row[cell];
					if (v == null) {
						v = '<span class="red">NULL</span>';
					}
					a += '<td>' + v + '</td>';
				}
				a += '</tr>';
				return a;
			}

			this.writeTalbe = function () {
				document.write(this.getTableHTML());
			}
		}

		function dispError(message) {
			errorMessage = '<p class="error">' + message + '</p>';
		}

		let t = new BwTable();
		const db = getLocalStorage() || disError('not support local Storage');

		function getLocalStorage() {
			try {
				if (!!window.localStorage) {
					return window.localStorage;
				}
			} catch (e) {
				return undefined;
			}
		}

		function dispResults() {
			if (errorMessage) {
				$('results').innerHTML = errorMessage;
				return;
			}

			t = new BwTable();
			t.addRow(['traveler', db.getItem('traveler')]);
			t.addRow(['destination', db.getItem('destination')]);
			t.addRow(['transportation', db.getItem('transportation')]);

			$('results').innerHTML = t.getTableHTML();
		}

		function dbGo() {
			if (errorMessage) {
				return;
			}

			let f = $('travelForm');

			db.setItem('traveler', f.elements['traveler'].value);
			db.setItem('destination', f.elements['destination'].value);
			db.setItem('transportation', f.elements['transportation'].value);

			dispResults();
		}

		function dbClear() {
			if (errorMessage) {
				return;
			}

			db.clear();
			dispResults();
		}

		window.onload = function () {
			dispResults();
		}
	</script>

</head>

<body>
	<section id="content">
		<h1>localStorge</h1>
		<form id="travelForm">
			<table class="form">
				<tr>
					<td class="label"> Traveler </td>
					<td><input type="text" name="traveler" /></td>
				</tr>
				<tr>
					<td class="label"> Destination </td>
					<td><input type="text" name="destination" /></td>
				</tr>
				<tr>
					<td class="label"> Transportation </td>
					<td><input type="text" name="transportation" /></td>
				</tr>
				<tr>
					<td colspan="2" class="button">
						<input id="formSubmit" type="button" value="Clear" onclick="dbClear()" />
						<input id="fromSubmit" type="button" value="Go" onclick="dbGo()" />
					</td>
				</tr>
			</table>
			<input id="inputAction" type="hidden" name="action" value="add" />
			<input id="inputKey" type="hidden" name="key" value="0" />
		</form>
	</section>
	<section id="results">

	</section>
</body>

</html>